﻿
(function ($) {
    "use strict"
    var content;//全局容器
    /****************** common基本函数方法 ******************/
    //渲染方块
    var randerBlock = function (block) {
        //块信息
        var id = block.id;
        var title = block.title;
        var classer = block.class || "draggerblock";//默认浏览状态的样式
        var url = block.url;
        //块对象
        var el = jQuery('<div class="' + classer + '" id=' + id + '>' + title + '</div>');
        el.data("bData", block);//方块绑定的数据
        return el;
    }
    //渲染分组
    var randerGroup = function (groupnode) {
        //组信息
        var groupid = groupnode.groupid;
        var title = groupnode.title;
        var blocks = groupnode.blocks;

        //组外壳对象
        var groupDiv = jQuery('<div class="group" id=' + groupid + '></div>');
        groupDiv.data("gData", groupnode);//外壳绑定数据
        var groupHead = jQuery('<div class="grouphead">' + title + '</div>');//头部
        var queues = jQuery('<div class="queue"></div>');                    //身体
        //遍历方块数据
        $.each(blocks, function (i, block) {
            //渲染出来的虚拟DOM方块对象
            var el = randerBlock(block);
            //绑定双击事件
            el.dblclick(function () {
                var data = jQuery(this).data("bData");
                alert("双击链接为:" + data.url);
                if (content.options.iconDblClick) {
                    content.options.iconDblClick(this);
                }
                return;
            });
            //追加分组中
            queues.append(el);
        });
        groupDiv.append(groupHead);//追加分组头部
        groupDiv.append(queues);   //追加分组身体
        //返回分组对象
        return groupDiv;
    }
    //创建一个块的删除图标
    var createBlockIcon = function () {
        var icon = jQuery("<div id='icon' class='icon'></div>");
        icon.bind("click", function () {
            var res = jQuery(this).parent().remove();//删除父
            //接口回调
            if (content.options.blockIconClick) {
                content.options.blockIconClick(res);//返回删除的元素
            }
        });
        return icon;
    }
    //创建一个分组的删除图标
    var createGroupIcon = function () {
        var icon = jQuery("<div id='icon' class='icon'></div>");
        icon.bind("click", function () {
            var res = jQuery(this).parent().parent().remove();//删除
            //接口回调
            if (content.options.groupIconClick) {
                content.options.groupIconClick(res);//返回删除的元素
            }
        });
        return icon;
    }

    //基于容器 向块上插入图标
    var insertBlockIcon = function (contentDiv) {
        contentDiv.find(".draggerblock").append(createBlockIcon()); //得到图标并插入图标
        contentDiv.find(".draggerblock").addClass("dragger");  //增加方块样式用作句柄
        contentDiv.find(".draggerblock").unbind("dblclick");   //移除双击事件        
    }
    //基于容器 向组上插入图标
    var insertGroupIcon = function (contentDiv) {
        contentDiv.find(".grouphead").append(createGroupIcon());//得到图标并插入图标
    }

    //插入加号方块
    var addPlusBlock = function (content) {
        //追加加号edit模式下
        var plus = {
            "class": "plus",
            "title": "+",//+++
            "id": "plus",
            "url": "http://www.baidu.com"
        };
        var el = randerBlock(plus);//渲染出一个基本方块
        //方块绑定单击事件
        el.click(function () {
            if (content.options.plusClick) {
                content.options.plusClick(this);
            } else {
                //var data = jQuery(this).data("bData");
                //alert("单击创建或者 链接为:" + data.url);
                //在组一add一个node
                var tempData = {
                    id: "blockid" + Date.now(), title: "title",
                    class: "draggerblock dragger", "url": "http://www.baidu.com"
                };
                var elt = randerBlock(tempData);//渲染出一个方块
                jQuery(elt).append(createBlockIcon());//在方块上增加图标
                jQuery(this).before(elt);//在加号前面插入临时方块
            }
            //注册拖拽能力
            registerDrag(content);
        });
        //方块追加到身体中
        content.find('.queue').append(el);
    }

    //解除编辑模式
    var unbindingPlugs = function (content) {
        //移除排序能力
        content.sortable('destroy');

        //1 解除图标
        content.find(".icon").remove();
        //2 解除加号
        content.find('.plus').remove();
        //3 恢复方块样式
        content.find(".draggerblock").removeClass("dragger");//恢复块的事件 和拖拽句柄
        //4 恢复方块的双击事件
        content.find(".draggerblock").dblclick(function () {
            var data = jQuery(this).data("bData");
            alert("双击链接为:" + data.url);
            if (content.options.iconDblClick) {
                content.options.iconDblClick(this);
            }
            return;
        });
        //5 解除方块拖拽的事件
        content.find(".draggerblock").unbind("mousedown");

        //6解除增加的边框 
        content.removeClass("container-border");
        content.find(".group").removeClass("group-border");
    }
    //绑定编辑模式
    var bindingPlugs = function (content) {
        //1 增加组的拖拽排序能力
        content.sortable({
            stop: function (e, opt) {
                if (content.options.sortAction) {
                    content.options.sortAction(e, opt);
                }
                return
            }
        }).disableSelection();

        //2 给分组和方块增加删除图标
        insertBlockIcon(content);
        insertGroupIcon(content);

        //3 给分组增加增大的加号
        addPlusBlock(content);

        //4 给div增加边框
        content.addClass("container-border");
        content.find(".group").addClass("group-border");

        //注册拖拽能力
        registerDrag(content);

    }


    /****************** init function ******************/
    //加载数据
    var getData = function (opt) {
        var res = jQuery.ajax({ url: opt.url, async: false }).responseText;
        return JSON.parse(res);
    }
    //布局初始化
    var initlayout = function (content, treeData) {
        //根信息
        content.userid = treeData.userid;
        content.username = treeData.username;

        var groupNodes = treeData.children;
        //遍历渲染出所有的组
        $.each(groupNodes, function (i, groupNode) {
            var div = randerGroup(groupNode);
            content.append(div);//插入到容器中
            // content.append(jQuery("<br/>"));
        });
    }
    //初始化的入口
    var init = function (contains, options) {
        //容器对象
        content = jQuery(contains).addClass(options.defaultstyle).width(options.width).height(options.height);
        content.options = options;
        //1 加载数据
        var treeData = getData(options);
        //2 开始布局        
        initlayout(content, treeData);
    }



    //main #container
    $.fn.extend({
        //入口
        layout: function (options) {
            //默认参数
            var defaults = {
                url: "/drag_demo/data.json?v=efdfd2fdf32fdf32ff",
                //data: [],
                defaultstyle: "container",//默认的样式
                //width: 500,
                //height: 500,

            }
            //重写参数
            var options = jQuery.extend(defaults, options);
            //初始化视图
            init(this, options);
            return this;//返回
        },
        mode: "look",//默认的模式 【浏览模式、编辑模式】
        //预览模式 => 编辑模式
        gotoEdit: function () {
            if (this.mode == "edit") { return; }//已经是编辑模式
            //在内容基础上装饰编辑模式
            bindingPlugs(content);
            this.mode = "edit";
        },
        //编辑模式 => 预览模式
        editToLook: function () {
            if (this.mode == "look") { return; }//已经是预览模式
            //在内容基础上解除编辑模式
            unbindingPlugs(content);
            this.mode = "look";
        },
        //删除指定的节点    （编辑模式）
        removeNode: function (blockId) {
            if (this.mode != "edit") { return; }
            jQuery(blockId).remove();
        },
        //删除指定的分组    （编辑模式）
        removeGroup: function (groupId) {
            if (this.mode != "edit") { return; }
            jQuery(groupId).remove();
        },

        //增加方块,向最后一个新建分组   (编辑模式)
        createBlock: function (blockdata) {
            blockdata = { id: "blockid" + Date.now(), title: "title", class: "draggerblock" };
            if (this.mode != "edit") { return; }
            var el = randerBlock(blockdata);
            jQuery(el).append(createBlockIcon());//基于块 在块上插入图标
            content.find("#newgroup .queue div").eq(-1).before(el);//在最后一个分组内增加方块 
            registerDrag(content);//注册拖拽能力
        },
        //向容器中新建分组 (编辑模式)
        createGroup: function (groupNode) {
            groupNode = { groupid: "groupid" + Date.now(), title: "默认新建组", blocks: [] }
            if (this.mode != "edit") { return; }
            var gDiv = randerGroup(groupNode);//勾勒一个组
            insertBlockIcon(gDiv);
            insertGroupIcon(gDiv);//基于组渲染出组和块的图标 
            content.append(gDiv);//插入 
            registerDrag(content);//注册拖拽能力
        },
        //传入2个对象，将第一个分组的元素全部挪到第二分组中  (编辑模式)
        moveNode2to1: function (group2s, group1s) {
            if (this.mode != "edit") { return; }
            var group2s = jQuery("#2 .queue");
            var group1s = jQuery("#1 .queue");
            $.each(group2s.children(), function (i, item) {
                group1s.append(item);
            });
            //2 表单单元拖拽
            registerDrag(content); //注册拖拽能力
        },

        //导出json数据 (编辑模式和预览模式都可以)
        exportData: function () {
            var groupsData = [];
            //遍历容器中的分组
            jQuery.each(content.find(".group"), function (i, group) {
                var gdata = jQuery(group).data("gData");
                var newgdata = {};//创建分组数据对象
                newgdata.groupid = gdata.groupid;
                newgdata.title = gdata.title;
                newgdata.blocks = [];//重新采集数据
                //编辑分组中的方块
                jQuery.each(jQuery(group).find(".queue .draggerblock"), function (i, block) {
                    var bdata = jQuery(block).data("bData");
                    newgdata.blocks.push(bdata);
                });
                groupsData.push(newgdata);
            });
            //导出
            return { userid: content.userid, username: content.username, children: groupsData }
        }
        //导出png图片

    });

})(jQuery);
